<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>update Emp</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/sweetalert.css" />
	</head>

	<body>
		<div id="wrap">
			<div id="top_content">
					<div id="header">
						<div id="rightheader">
							<p>
								2009/11/20
								<br />
							</p>
						</div>
						<div id="topheader">
							<h1 id="title">
								<a href="#">Main</a>
							</h1>
						</div>
						<div id="navigation">
						</div>
					</div>
				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						update Emp info:
					</h1>
					<form>
						<table cellpadding="0" cellspacing="0" border="0"
							class="form_table">
							<tr>
								<td valign="middle" align="right">
									id:
								</td>
								<td valign="middle" align="left">
									{{emp.id}}
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									name:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri"  v-model="emp.name"/>
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									old photo:
								</td>
								<td valign="middle" align="left">
									<img :src="'/'+emp.path" style="height: 60px" alt="">
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									salary:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri"  v-model="emp.salary"/>
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									age:
								</td>
								<td valign="middle" align="left">
									<input type="text"  class="inputgri"  v-model="emp.age"/>
								</td>
							</tr>
						</table>
						<p>
							<input type="button" @click="update(emp.id)" class="button" value="Confirm" />
						</p>
					</form>
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">
					ABC@126.com
				</div>
			</div>
		</div>
	</body>
</html>
<!--引入Vue-->
<script src="/js/vue.js"></script>
<!--引入axios-->
<script src="/js/axios.min.js"></script>
<script src="/js/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/sweetalert.css" />

<script type="text/javascript">
	var vue=new Vue({
		el:"#wrap",
		data:{
         emp:{}
		},
		methods:{
          update(id){
          	var formData=new FormData();
          	formData.append("id",this.emp.id);
          	formData.append("name",this.emp.name);
          	formData.append("age",this.emp.age);
          	formData.append("salary",this.emp.salary);
          	axios({
				method:"post",
				url:"http://localhost:8888/emp/update",
				data:formData,
			}).then(res=>{
				window.location.href="/emplist.html"
			})
		  }
		},
		created(){
          //获取id
			var start=location.href.lastIndexOf("=");
			var id=location.href.substring(start+1);
			axios.get("http://localhost:8888/emp/findOne?id="+id)
			.then(response=>{
				this.emp=response.data.data.emp
			})
		}
	})
</script>